<template>
	<view class="workbench-detail">
		<!-- 事项明细标题 -->
		<view class="detail-title">组织临时性例会</view>
		<!-- 明细概况 -->
		<view class="detail-content">
			<van-cell title="所属类型" value="售后部" icon="apps-o" />
			<van-cell title="事项分类" value="团队例会" icon="points" />
			<van-cell title="执行标准" value="列会照片" icon="guide-o" />
		</view>
		<!-- 点检痕迹 -->
		<view class="detail-tally-trace">
			<view class="detail-trace-title">痕迹</view>
			<view class="detail-tally-imgs">
				<view class="grid-item-box">
					<image src="../../static/avatar.jpg" class="tally-img" mode="aspectFill" />
					<van-icon class="delete-icon" name="clear" />
				</view>
				<view class="grid-item-box detail-tally-img-add">
					<van-icon class="add-icon" name="plus" />
				</view>
			</view>
		</view>
		<!-- 备注 -->
		<view class="detail-tally-trace">
			<view class="detail-trace-title">备注</view>
			<view class="detail-remark">
				<uni-easyinput type="textarea" :trim="true" :inputBorder="false" v-model="remark" placeholder="请输入备注" />
			</view>
		</view>
		<!-- 是否完成 -->
		<view class="detail-iscompleted">
			<van-cell title="是否完成" :value="isCompleted" icon="passed" @click="handleCompletedPopShow" />
		</view>

		<!-- 是否完成popup -->
		<van-popup :show="completedPopShow" position="bottom">
			<van-picker show-toolbar :columns="completedList" @confirm="onCompletedConfirm"
				@cancel="completedPopShow = false" />
		</van-popup>

		<button class="submit-btn">确认提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				remark: '',
				isCompleted: '请选择完成状态',
				completedPopShow: false,
				completedList: ['已完成', '未完成'],
			}
		},
		methods: {
			handleCompletedPopShow() {
				this.completedPopShow = true;
			},
			onCompletedConfirm(value) {
				this.isCompleted = value.detail.value;
				this.completedPopShow = false;
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.workbench-detail {
		.detail-title {
			background-color: #fff;
			height: 44px;
			line-height: 44px;
			padding: 0 17px;
			font-size: 16px;
			color: #000;
			font-weight: bold;
		}

		.detail-content {
			margin-top: 10px;
		}

		.detail-tally-trace {
			margin-top: 10px;

			.detail-trace-title {
				font-size: 12px;
				color: #999999;
				margin-left: 16px;
			}

			.detail-tally-imgs {
				background-color: #fff;
				margin-top: 10px;
				padding: 0px 15px 15px 15px;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;

				.grid-item-box {
					width: 100px;
					height: 100px;
					position: relative;
					margin-left: 15px;
					margin-top: 15px;

					&:nth-child(3n+1) {
						margin-left: 0;
					}

					.tally-img {
						width: 100%;
						height: 100%;
					}

					.delete-icon {
						position: absolute;
						top: -10px;
						right: -10px;
						color: #FF1010;
						background-color: #fff;
						font-size: 22px;
						border-radius: 50%;
						z-index: 99;
					}

					&.detail-tally-img-add {
						text-align: center;
						line-height: 100px;
						border: 1px solid #efefef;
						box-sizing: border-box;

						.add-icon {
							font-size: 28px;
							color: #999999;
						}
					}
				}
			}

			.detail-remark {
				margin-top: 10px;
				background-color: #fff;
				padding: 10px 16px;
				box-sizing: border-box;
			}
		}

		.detail-iscompleted {
			margin-top: 10px;
		}

		.submit-btn {
			margin: 20px 5% 20px 5%;
			width: 90%;
			border: none;
			background-color: #008aff;
			color: #fff;
			font-size: 14px;
			height: 36px;
			line-height: 36px;

			&:active {
				background-color: #0076DB;
			}
		}
	}
</style>
